<template>
  <div>
    <home-header></home-header>
    <div class="banner" :style="{backgroundImage:`url(${backgroundURl})`}">
      <p>
        <vuetyped v-if="flag" :strings="[typewriter]" :loop="false" :smart-backspace="true">
          <div class="typing" />
        </vuetyped>
      </p>
    </div>

    <router-view v-slot="{ Component }">
      <transition name="fade2" appear mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
    <footer v-html="footer">
    </footer>
  </div>
</template>
<script>
import { reactive, toRefs, provide, ref } from 'vue'
import HomeHeader from '@/components/home/HomeHeader.vue'
import { useStore } from 'vuex'
import http from '@/utils/http.js'
export default {
  components: { HomeHeader },
  setup () {
    const msg = ref('')
    const store = useStore()
    const data = reactive({
      backgroundURl: store.state.UrlBase + 'frontUploads/frontImage.jpg',
      typewriter: '',
      footer: '',
      flag: false
    });
    provide('homeDataList', msg)
    http.get('/endIndex/front').then(res => {
      msg.value = res.data.info[0].bulletin
      data.footer = res.data.info[0].footer
      data.typewriter = res.data.info[0].typewriter
      data.flag = true
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.banner {
  display: flex;
  height: 400px;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-color: #2b2b2b;
  font-size: 25px;
  color: #fff;
  letter-spacing: 15px;
  font-weight: 700;
}
</style>